<style lang="less">
@import "./goodsOrderDetail.less";
.form-item-inline-block {
  width: 500px;
  display: inline-block;
}
.form-item-top {
  padding-top: 16px;
}
</style>
<template>
  <div class="search" style="background-color:white" id="pop">
    <template>
      <Form ref="lineOrderDetailForm" :model="lineOrderDetailForm" :label-width="110">
        <Form-item label="订单号:" prop="orderSn" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.orderSn}}</label>
        </Form-item>
        <Form-item label="买家昵称:" prop="buyerNick" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.buyerNick}}</label>
        </Form-item>
        <Form-item label="下单时间:" prop="createTime" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.createTime}}</label>
        </Form-item>

        <Form-item label="订单状态:" prop="status" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.status}}</label>
        </Form-item>
        <Form-item label="买家留言:" prop="buyerMessage" class="form-item-inline-block" style="width: 800px;">
          <label>{{lineOrderDetailForm.buyerMessage}}</label>
        </Form-item>

        <!-- <Form-item label="创建者:" prop="createBy" class="form-item-inline-block">
                    <label>{{lineOrderDetailForm.createBy}}</label>
                  </Form-item> -->
        <!-- <Form-item label="地址ID:" prop="addressId">
                    <Input type="text" v-model="lineOrderDetailForm.addressId" clearable style="width: 200px"/>
                  </Form-item>
                  <Form-item label="买家评价:" prop="buyerRate">
                    <Input type="text" v-model="lineOrderDetailForm.buyerRate" clearable style="width: 200px"/>
                  </Form-item> -->
        <!-- <Form-item label="用户信息:" prop="userId">
                    <Input type="text" v-model="lineOrderDetailForm.userId" clearable style="width: 200px"/>
                  </Form-item> -->

        <Form-item label="商品总价:" prop="goodsAmountTotal" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.goodsAmountTotal}}</label>
        </Form-item>
        <Form-item label="商品数量:" prop="goodsCount" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.goodsCount}}</label>
        </Form-item>
        <Form-item class="form-item-inline-block"></Form-item>

        <hr style="border-bottom:1px dashed #dddee1; height:1px; margin-top:-4px; margin-bottom:20px;">

        <Form-item label="支付金额:" prop="payment" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.payment}}</label>
        </Form-item>
        <Form-item label="支付方式:" prop="paymentType" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.paymentType}}</label>
        </Form-item>
        <Form-item label="支付时间:" prop="paymentTime" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.paymentTime}}</label>
        </Form-item>

        <hr style="border-bottom:1px dashed #dddee1; height:1px; margin-top:-4px; margin-bottom:20px;">

        <Form-item label="物流号:" prop="shipCode" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.shipCode}}</label>
        </Form-item>
        <Form-item label="物流名称:" prop="shipName" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.shipName}}</label>
        </Form-item>
        <Form-item label="运费:" prop="postFee" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.postFee}}</label>
        </Form-item>
        <Form-item label="发货时间:" prop="consignTime" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.consignTime}}</label>
        </Form-item>

        <hr style="border-bottom:1px dashed #dddee1; height:1px; margin-top:-4px; margin-bottom:20px;">

        <Form-item label="交易关闭时间:" prop="closeTime" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.closeTime}}</label>
        </Form-item>
        <Form-item label="交易完成时间:" prop="endTime" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.endTime}}</label>
        </Form-item>
        <Form-item class="form-item-inline-block"></Form-item>

        <Form-item label="商品图片:" prop="goodsImg" class="form-item-inline-block">
          <!-- <image-component ref="orderGoodsComp"></image-component> -->
          <order-image-show-comp ref="orderGoodsComp"></order-image-show-comp>
        </Form-item>
        <Form-item label="商品id:" prop="goodsId" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.goodsId}}</label>
        </Form-item>
        <Form-item label="商户信息:" prop="supplierId" class="form-item-inline-block">
          <label>{{lineOrderDetailForm.supplierId}}</label>
        </Form-item>
        <hr style="border-bottom:1px dashed #dddee1; height:1px; margin-top:-14px; margin-bottom:20px;">

        <div v-for="item in lineOrderItems" :key="item.id">
          <Form-item label="特产编号:" class="form-item-inline-block">
            <label>{{item.goodsSn}}</label>
          </Form-item>
          <Form-item label="特产名称:" class="form-item-inline-block">
            <label>{{item.goodsName}}</label>
          </Form-item>
          <Form-item label="特产数量:" class="form-item-inline-block">
            <label>{{item.goodsNumber}}</label>
          </Form-item>
          <Form-item label="特产价格:" class="form-item-inline-block">
            <label>{{item.goodsPrice}}</label>
          </Form-item>
          <Form-item label="总费用:" class="form-item-inline-block">
            <label>{{item.toalFee}}</label>
          </Form-item>
          <Form-item label="市场价格:" class="form-item-inline-block">
            <label>{{item.marketPrice}}</label>
          </Form-item>
          <Form-item label="是否参加活动:" class="form-item-inline-block">
            <label>{{item.isGift}}</label>
          </Form-item>
          <Form-item label="是否实物:" class="form-item-inline-block">
            <label>{{item.isReal}}</label>
          </Form-item>
          <Form-item label="是否发货:" class="form-item-inline-block">
            <label>{{item.sendNumber}}</label>
          </Form-item>
          <Form-item label="特产图片:" class="form-item-inline-block">
            <order-image-show-comp :piclist="item.piclist"></order-image-show-comp>
          </Form-item>
        </div>

        <hr style="border-bottom:1px solid #dddee1; height:1px;">
      </Form>

      <div style="padding:16px 0px;margin-left:2px;" class="operation">
        <Button @click="cancelSubmitLine" icon="android-arrow-back" style="width:120px;margin-right:10px;">返回主页</Button>
      </div>

    </template>
  </div>
</template>

<script>

// import ImageComponent from "./../../comm-comp/imageComponent.vue";
import OrderImageShowComp from "./../comm-comp/orderImageShowComp.vue";

export default {
  name: "goods-order-detail",
  components: {
    OrderImageShowComp
  },
  data() {
    return {
      lineOrderDetailForm: {
        orderSn: "",
        createBy: "",
        createTime: "",
        addressId: "",
        buyerMessage: "",
        buyerNick: "",
        buyerRate: "",
        closeTime: "",
        endTime: "",
        consignTime: "",
        goodsAmountTotal: "",
        goodsCount: "",
        payment: "",
        paymentTime: "",
        paymentType: "",
        postFee: "",
        shipCode: "",
        shipName: "",
        status: "",
        supplierId: "",
        userId: "",
        goodsImg: "",
        goodsId: "",
        litpic: "",
        piclist: ""
      },
      lineOrderItems: [],

      lineActivityDetailModalType: 0,
      lineActivityButtonTypeText: "添加",
      lineActivityButtonTypeIcon: "plus-round"

    };
  },
  methods: {
    init() {
    },

    resetFormByType: function(type, updateLine) {
      console.log(updateLine);
      if (0 === type) {
        this.lineActivityDetailModalType = 0;
        this.lineActivityButtonTypeText = "添加";
        this.lineActivityButtonTypeIcon = "plus-round";

        this.$refs.lineLitpicComp.initByType("line", 0, null);
        this.$refs.linePiclistComp.initByType("line", 0, null);
      } else if (1 === type) {
        this.lineActivityDetailModalType = 1;
        this.lineActivityButtonTypeText = "编辑";
        this.lineActivityButtonTypeIcon = "edit";
        this.lineOrderDetailForm = updateLine;

        console.log(updateLine.ordersLineList);
        this.lineOrderItems = updateLine.ordersGoodsList;
        //ordersLineList中piclist加上图片前缀
        // this.lineOrderItems = this.addPicPrefix(updateLine.ordersLineList);
        // this.$refs.orderGoodsComp.initByType("line",2,updateLine.goodsImg);
        this.$refs.orderGoodsComp.initByType(updateLine.goodsImg);
      } else {
      }

      this.$refs.lineOrderDetailForm.resetFields();
      for (let attr in this.lineOrderDetailForm) {
        if (this.lineOrderDetailForm[attr] == null) {
          this.lineOrderDetailForm[attr] = "";
        }
      }
    },

    addPicPrefix(addPrefixList) {
      const urlPrefix = "http://192.168.11.243:8080";
      addPrefixList.forEach(function(item) {
        let pathArr = item.piclist.split(",");
        let addPrefixPathArr = [];
        for (let i in pathArr) {
          addPrefixPathArr.push(urlPrefix + pathArr[i]);
        }
        item.piclist = addPrefixPathArr;
      });
      return addPrefixList;
    },

    cancelSubmitLine: function() {
      this.$emit("on-line-activity-cancel", true);
    }
  },
  mounted() {
    this.init();
  }
};
</script>
